'use client'

import { useState } from 'react'
import { Download, BookOpen, Lightbulb, Languages, Image } from 'lucide-react'
import { StoryData } from '@/types/story'
import ComicDisplay from './ComicDisplay'

interface StoryDisplayProps {
  story: StoryData
}

export default function StoryDisplay({ story }: StoryDisplayProps) {
  const [activeTab, setActiveTab] = useState<'story' | 'comics' | 'vocabulary' | 'moral'>('story')

  const handleDownload = () => {
    // 创建下载内容
    const content = `
${story.title}
${story.englishTitle}

${story.content}

${story.englishContent}

故事寓意：
${story.moral}

${story.englishMoral}

词汇学习：
${story.vocabulary.join(', ')}
${story.englishVocabulary.join(', ')}
    `
    
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `${story.title}.txt`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  return (
    <div className="space-y-6">
      {/* 故事标题 */}
      <div className="text-center">
        <h2 className="story-title">{story.title}</h2>
        <h3 className="text-xl text-gray-600 font-story">{story.englishTitle}</h3>
      </div>

      {/* 主插图 */}
      {story.illustration && (
        <div className="flex justify-center">
          <div className="relative">
            <img
              src={story.illustration}
              alt="故事插图"
              className="rounded-lg shadow-lg max-w-full h-auto max-h-96 object-contain"
            />
            <div className="absolute top-2 right-2 bg-white bg-opacity-80 rounded-full p-1">
              <BookOpen className="h-4 w-4 text-primary-600" />
            </div>
          </div>
        </div>
      )}

      {/* 标签页导航 */}
      <div className="border-b border-gray-200">
        <nav className="flex space-x-8">
          <button
            onClick={() => setActiveTab('story')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'story'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            故事内容
          </button>
          {story.comicPanels && story.comicPanels.length > 0 && (
            <button
              onClick={() => setActiveTab('comics')}
              className={`py-2 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'comics'
                  ? 'border-primary-500 text-primary-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              卡通漫画
            </button>
          )}
          <button
            onClick={() => setActiveTab('vocabulary')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'vocabulary'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            词汇学习
          </button>
          <button
            onClick={() => setActiveTab('moral')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'moral'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            故事寓意
          </button>
        </nav>
      </div>

      {/* 标签页内容 */}
      <div className="min-h-[300px]">
        {activeTab === 'story' && (
          <div className="space-y-6">
            <div className="story-card">
              <div className="flex items-center space-x-2 mb-4">
                <Languages className="h-5 w-5 text-primary-600" />
                <h3 className="font-semibold text-gray-900">中文故事</h3>
              </div>
              <div className="story-text whitespace-pre-line">{story.content}</div>
            </div>
            
            <div className="story-card">
              <div className="flex items-center space-x-2 mb-4">
                <BookOpen className="h-5 w-5 text-primary-600" />
                <h3 className="font-semibold text-gray-900">English Story</h3>
              </div>
              <div className="story-text whitespace-pre-line font-story">{story.englishContent}</div>
            </div>
          </div>
        )}

        {activeTab === 'comics' && story.comicPanels && story.comicPanels.length > 0 && (
          <ComicDisplay 
            panels={story.comicPanels}
            title={story.title}
            englishTitle={story.englishTitle}
          />
        )}

        {activeTab === 'vocabulary' && (
          <div className="story-card">
            <div className="flex items-center space-x-2 mb-4">
              <BookOpen className="h-5 w-5 text-primary-600" />
              <h3 className="font-semibold text-gray-900">词汇学习</h3>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <h4 className="font-medium text-gray-900 mb-2">中文词汇</h4>
                <div className="flex flex-wrap gap-2">
                  {story.vocabulary.map((word, index) => (
                    <span
                      key={index}
                      className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
                    >
                      {word}
                    </span>
                  ))}
                </div>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 mb-2">English Vocabulary</h4>
                <div className="flex flex-wrap gap-2">
                  {story.englishVocabulary.map((word, index) => (
                    <span
                      key={index}
                      className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm"
                    >
                      {word}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'moral' && (
          <div className="story-card">
            <div className="flex items-center space-x-2 mb-4">
              <Lightbulb className="h-5 w-5 text-primary-600" />
              <h3 className="font-semibold text-gray-900">故事寓意</h3>
            </div>
            <div className="space-y-4">
              <div>
                <h4 className="font-medium text-gray-900 mb-2">中文寓意</h4>
                <p className="story-text">{story.moral}</p>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 mb-2">English Moral</h4>
                <p className="story-text font-story">{story.englishMoral}</p>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 操作按钮 */}
      <div className="flex justify-center space-x-4">
        <button
          onClick={handleDownload}
          className="btn-primary flex items-center space-x-2"
        >
          <Download className="h-4 w-4" />
          <span>下载故事</span>
        </button>
      </div>
    </div>
  )
} 